<template>
  <div>
    <h1>用户管理</h1>
    <br>
    <span>查询用户信息</span>
    <el-input type="text" v-model="userNames" placeholder="用户名称" style="width: 15%"></el-input>
    <el-button type="primary" @click="queryUserName()">查询</el-button>
    <br><br>
    <el-row>
      <el-table :data="userList" stripe>
        <el-table-column prop="account" label="用户名"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="trueName" label="真实姓名"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="deleteUser(scope.row)">删除用户</el-button>
            <el-button type="primary" @click="modifyPermission(scope.row)">修改权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize"
                     background :total="total" @current-change="changeCurPage()"></el-pagination>
    </el-row>
    <br>
    <el-button type="primary" @click="addUser">添加新用户</el-button>
    <br><br>

    <!--添加弹出框-->
    <el-dialog v-model="addPopup" title="添加用户信息" width="36%">
      <el-form :model="userForm" ref="userForm" :rules="rules" class="">
        <!--<el-form-item 表单中的每一行，由框架底层提供样式布局>-->
        <!--label 表单的描述-->
        <el-form-item label="用户名　" prop="account">
          <el-input v-model="userForm.account"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="trueName">
          <el-input v-model="userForm.trueName"></el-input>
        </el-form-item>
        <el-form-item label="选择角色" prop="haveRoles">
          <!--    复选框-->

          <el-checkbox-group v-model="userForm.haveRoles" @change="queryPower()">
            <el-checkbox v-for="item in lessonArray"
                         :key="item.roleId"
                         :label="item.roleName"
                         :value="item.roleName"></el-checkbox>

          </el-checkbox-group>
        </el-form-item>
        拥有权限： <span v-for="item in lesson"
                        :key="item.powerId"

      >{{ item.powerName }}&nbsp&nbsp</span><br>

        <span class="dialog-footer">
          <el-button type="primary" @click="cancel()">取消</el-button>
          <el-button type="primary" @click="addUsers()">添加</el-button>
        </span>
      </el-form>
    </el-dialog>

    <!--修改权限弹出框-->
    <el-dialog v-model="modifyUserPermissions" title="修改用户权限" width="36%">
      <el-form :model="modifyForm" ref="modifyForm" :rules="rules" class="">
        <!--<el-form-item 表单中的每一行，由框架底层提供样式布局>-->
        <!--label 表单的描述-->
        <el-form-item label="用户名　" prop="userName">
          <span>{{ modifyForm.account }}</span>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          {{ modifyForm.trueName }}
        </el-form-item>
        <el-form-item label="当前角色" prop="currentRole">
          <!--    复选框-->
          <el-checkbox-group v-model="modifyForm.haveRoles" @change="queryPowerRoleArray()">
            <el-checkbox v-for="item in roleArray"
                         :key="item.roleId"
                         :label="item.roleName"
                         :value="item.roleName"></el-checkbox>

          </el-checkbox-group>
        </el-form-item>

        拥有权限： <span v-for="item in power"
                        :key="item.powerId"

      >{{ item.powerName }}&nbsp&nbsp</span><br>

        <span class="dialog-footer">
          <el-button type="primary" @click="cancel()">取消</el-button>


          <el-button type="primary" @click="updateRole()">确认修改</el-button>

        </span>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "userManagement",
  created() {
    this.queryUserName()
  },
  data() {
    return {
      userList: [],
      supplier: {},
      curPage: 1,
      pageSize: 3,
      total: '',
      userName: '',
      userNames: '',
      addPopup: false,
      //修改权限
      modifyUserPermissions: false,
      userForm: {
        account: '',
        trueName: '',
        haveRoles: [],
      },
      //修改权限
      modifyForm: {
        account: '',
        trueName: '',
        haveRoles: [],
      },

      currentRole: [],
      lessonArray: [],
      roleId: '',
      lesson: [],
      roleArray: [],
      power: []
    }

  }, methods: {
    /**
     * 分页
     */
    changeCurPage() {
      this.userLists()
      this.queryUserName()
    },
    /**
     * 显示账户信息 分页
     */
    userLists() {
      let param = {
        "curPage": this.curPage,
        "pageSize": this.pageSize
      }
      axios.post('api/user/list', param).then(response => {
        //alert(this.curPage)
        //alert(this.pageSize)
        let data = response.data
        this.userList = response.data.records
        //总条数
        this.total = data.total;
        //当前页码
        this.curPage = data.current;
        //总页码
        this.pageSize = data.size;
      });
    },
    /**
     * 查询账户信息 分页
     */
    queryUserName() {
      let param = new URLSearchParams()
      param.append("name", this.userNames)
      axios.post('/api/user/queryUserBeanList', param).then(response => {
        this.userList = response.data

      })
    },
    /**
     * 添加新用户弹出框 取消按钮
     */
    cancel() {
      this.modifyUserPermissions = false;
      this.addPopup = false;

    },
    /**
     * 添加新用户弹出框
     */
    addUser() {
      this.addPopup = true;
      axios.post("/api/role/queryRole", null).then(res => {
        this.lessonArray = res.data
      })
    },
    queryPower() {


      if (this.userForm.haveRoles != null) {

        axios.post("/api/power/queryPower", this.userForm.haveRoles).then(res => {

          this.lesson = res.data
        })
      } else {
        this.lesson = []
      }


    },
    /**
     * 点确定 添加用户
     */
    addUsers() {


      axios.post("api/user/addUser", this.userForm).then(res => {
        this.userForm = {}
        this.lesson = []
        this.queryUserName()
      })

    },
    /**
     * 删除用户
     */
    deleteUser(scope) {
      let param = new URLSearchParams();
      param.append("id", scope.userId)

      axios.post('/api/user/deleteUser', param).then(response => {
        this.queryUserName();
      });
    },
    /**
     * 修改权限
     */
    modifyPermission(scope) {
      this.modifyUserPermissions = true;
      this.modifyForm = scope
      axios.post("/api/role/queryRole", null).then(res => {
        this.roleArray = res.data
      })


      axios.post("/api/role/queryScope", scope).then(res => {

        this.modifyForm.haveRoles = res.data
        axios.post("/api/power/queryPower", this.modifyForm.haveRoles).then(res => {

          this.power = res.data
        })
      })


    },
    /**
     * 点击复选框  改变权限信息
     */
    queryPowerRoleArray() {
      console.log(this.modifyForm.haveRoles)
      if (this.modifyForm.haveRoles != null) {

        axios.post("/api/power/queryPower", this.modifyForm.haveRoles).then(res => {

          this.power = res.data
        })
      } else {
        this.power = []
      }
    },
    /**
     * 点确定修改
     */
    updateRole() {

      axios.post("/api/role/updateRole", this.modifyForm).then(res => {

        this.modifyUserPermissions = false
        ElMessage({
          message: '修改成功',
          type: 'success'
        })
      })


    }


  }
}
</script>

<style scoped>

</style>